import React from 'react';
import {LightFilter, ProFormRadio} from "@ant-design/pro-form";
import {FilterOutlined} from "@ant-design/icons";
import { Input , DatePicker} from 'antd';
const { Search } = Input;
const { RangePicker } = DatePicker;

// 定义头部搜索框组件
const SearchHeader = ()=>{
  const onSearch = value => console.log(value);

  return (
    <div style={{background:'#fff',padding:'20px 20px'}}>
      <div style={{width:'100%',display:'flex',alignItems:'center',marginBottom:'30px'}}>
        <span>留言信息： </span><div style={{overflow:'hidden',display:'inline-block'}}><Search style={{width:'500px'}} placeholder="请输入用户昵称/电话/留言内容搜索" onSearch={onSearch} enterButton /></div>
      </div>
      <LightFilter
        initialValues={{
          sex: 'man',
        }}
        bordered
        collapseLabel={<FilterOutlined />}
        onFinish={async (values) => console.log(values)}
      >
        <span style={{margin:'-8px -8px 0 0'}}>留言时间：</span>
        <ProFormRadio.Group
          name="radio"
          radioType="button"
          options={[
            {
              value: 'all',
              label: '每周',
            },
            {
              value: 'today',
              label: '每周',
            },
            {
              value: 'yesterday',
              label: '昨天',
            },
            {
              value: 'sevenDays',
              label: '最近七天',
            },
            {
              value: 'monthly',
              label: '最近30天',
            },
            {
              value: 'monthly',
              label: '本月',
            },
            {
              value: 'yearly',
              label: '本年',
            },
          ]}
        />
        {/*<ProFormDatePicker name="time" placeholder="日期" />*/}
        <RangePicker />
      </LightFilter>
    </div>
  )
}


export default SearchHeader;
